<!DOCTYPE html >
<html>
<head>
    <link rel="stylesheet" href="demos.css" type="text/css" media="screen" />
    
    <script src="../libraries/RGraph.common.core.js" ></script>
    <script src="../libraries/RGraph.common.dynamic.js" ></script>
    <script src="../libraries/RGraph.common.tooltips.js" ></script>
    <script src="../libraries/RGraph.line.js" ></script>
    <!--[if lt IE 9]><script src="../excanvas/excanvas.js"></script><![endif]-->
    
    <title>A line chart showing US prison population</title>
    
    <meta name="description" content="A line chart with custom tickmarks and custom styled tooltips" />
</head>
<body>

    <h1>A line chart showing US prison population</h1>

    <canvas id="cvs" width="900" height="250">[No canvas support]</canvas>
    

    <script>
        var data = [0.140652855, 0.156898821, 0.17392137, 0.181314164, 0.190083403, 0.204936627, 0.219226948, 0.232290443, 0.248576086, 0.276869432, 0.297991221, 0.314307072, 0.333516451, 0.352770502, 0.380347379, 0.410398994, 0.425115587, 0.439371182, 0.45309086, 0.47202617, 0.466500291, 0.466535618, 0.475166227, 0.478867548, 0.485024967, 0.489713802, 0.500002324, 0.503305103, 0.500315325, 0.496573444];
 
		var line = new RGraph.Line('cvs', data)
            .Set('title', 'Interactive chart of percent U.S. population incarcerated.')
            .Set('text.font', 'Arial')
            .Set('background.barcolor1', 'rgba(255,255,255,1)')
            .Set('background.barcolor2', 'rgba(255,255,255,1)')
            .Set('background.grid.autofit.numvlines', 29)
            .Set('colors', ['rgba(77,193,238,1)'])
            .Set('linewidth', 2)
            .Set('labels', ['1980', '\r\n1981', '1982', '\r\n1983', '1984', '\r\n1985','1986','\r\n1987', '1988', '\r\n1989', '1990', '\r\n1991', '1992', '\r\n1993', '1994', '\r\n1995', '1996', '\r\n1997', '1998', '\r\n1999', '2000', '\r\n2001', '2002', '\r\n2003', '2004', '\r\n2005', '2006', '\r\n2007', '2008', '\r\n2009'])
            .Set('gutter.bottom', 40)
            .Set('text.size', 8)
            .Set('scale.decimals', 1)
            .Set('tickmarks', myTick)
            .Set('tooltips', ['id:1980', 'id:1981', 'id:1982', 'id:1983', 'id:1984', 'id:1985','id:1986','id:1987', 'id:1988', 'id:1989', 'id:1990', 'id:1991', 'id:1992', 'id:1993', 'id:1994', 'id:1995', 'id:1996', 'id:1997', 'id:1998', 'id:1999', 'id:2000', 'id:2001', 'id:2002', 'id:2003', 'id:2004', 'id:2005', 'id:2006', 'id:2007', 'id:2008', 'id:2009'])
            .Set('tooltips.css.class', 'tooltip')
		    .Set('numxticks', 29)
            .Draw();

	    function myTick (obj, data, value, index, x, y, color, prevX, prevY)
        {
    	    var ctx = obj.canvas.getContext("2d");
    	    ctx.fillStyle = "white";
    	    
            if(index == 3 || index == 4 || (index >= 13 && index<= 16) || index == 20){
    		    ctx.fillStyle = "#4C2288";
    	    }

            // Draw your custom tick here
            ctx.beginPath();
            ctx.arc(x, y, 3, 0, Math.PI*2, true);
            ctx.closePath();
            ctx.stroke();
            ctx.fill();
        }
    </script>

    <p>
        <a href="./">&laquo; Back</a>
    </p>

    <div style="display: none"> 
        <div id="1983"><a href="http://en.wikipedia.org/wiki/Corrections_Corporation_of_America">Corrections Corporation of America</a> is founded</a></div> 
        <div id="1984"><a href="http://www.enotes.com/major-acts-congress/sentencing-reform-act">Sentencing Reform Act</a> passed</a></div> 
        <div id="1993"><a href="http://en.wikipedia.org/wiki/Three_strikes_law">Three strikes law</a> enacted in Washington</div> 
        <div id="1994"><a href="http://en.wikipedia.org/wiki/Three_strikes_law">Three strikes laws</a> enacted in California, Colorado, Connecticut, Indiana, Kansas, Nevada, North Dakota</div> 
        <div id="1995"><a href="http://en.wikipedia.org/wiki/Three_strikes_law">Three strikes laws</a> enacted in Arkansas, Georgia, Maryland, Montana,<br/> New Jersey, New Mexico, North Carolina, Pennsylvania, South Carolina,<br/> Utah, Vermont, Wisconsin</div> 
        <div id="1996"><a href="http://en.wikipedia.org/wiki/Three_strikes_law">Three strikes laws</a> enacted in Florida, Tennessee, Virginia</div> 
        <div id="2000"><a href="http://en.wikipedia.org/wiki/California_Proposition_36_%282000%29">Substance Abuse and Crime Prevention Act</a> passed in California</div> 
    </div>

    <style>
        .tooltip {
            background-color: #efefef !important;
            font: 10px Arial, sans-serif !important;
            padding: 3px;
            border-color: #999 !important;
        }
    </style>
</body>
</html>